<template>
  <yt-page title="待办事项" scroll>
    <yt-cell v-for="(item, index) in items" :key="index" :label="item.todo_content" labelWidth="70%" isLink @click="goDetail(item)" border="all">
      <div slot="icon" class="circle bg-orange" v-show="item.todo_category === '企业隐患排查'">
        <span class="iconfont icon-danger"></span>
      </div>
      <div slot="icon" class="circle bg-light-blue" v-show="item.todo_category === '收发文件'">
        <span class="iconfont icon-tools"></span>
      </div>
      <div slot="icon" class="circle bg-purple" v-show="item.todo_category === '通知公告'">
        <span class="iconfont icon-message"></span>
      </div>
      <div slot="icon" class="circle bg-blue" v-show="item.todo_category === '会议通知'">
        <span class="iconfont icon-team"></span>
      </div>
      <div slot="icon" class="circle bg-green" v-show="item.todo_category === '行政执法' || item.todo_category === '执法任务'">
        <span class="iconfont icon-law"></span>
      </div>
      <div slot="icon" class="circle bg-red" v-show="item.todo_category === '特殊作业'">
        <span class="iconfont icon-machine-2"></span>
      </div>
      <div slot="icon" class="circle bg-blue" v-show="item.todo_category === '企业注册审核'">
        <span class="iconfont icon-company"></span>
      </div>
    </yt-cell>
  </yt-page>
</template>

<script>
import { SetStore, GetStore, Store } from '@/store'
import { commonApi } from '@/common/api/commonApi.js'
import _ from 'lodash'

export default {
  data() {
    return {
      items: []
    }
  },
  computed: {
    itemsObj() {
      return _.groupBy(this.items, 'todo_category')
    }
  },
  activated() {
    this.initData()
    this.onSubscribe()
  },
  deactivated() {
    this.onUnsubscribe()
  },
  methods: {
    async initData() {
      const user = GetStore(Store.user)
      const roles = GetStore(Store.roles)
      const fn = object => {
        if (object.todo_state !== 0) {
          return false
        } else {
          if (object.todo_id && object.todo_id.indexOf(user.id) > -1) {
            return true
          } else {
            if (object.todo_role && object.todo_role.length) {
              let obj = roles.find(v => object.todo_role.indexOf(v) > -1)
              return !!obj
            }
            return false
          }
        }
      }
      this.subscription = commonApi.liveQuery('sys_todo')
      this.subscription.on('create', object => {
        object = { id: object.id, ...object.attributes }
        if (fn(object)) {
          this.items.push(object)
        }
      })
      this.subscription.on('update', object => {
        object = { id: object.id, ...object.attributes }
        let index = this.items.findIndex(v => v.id === object.id)
        if (index > -1) {
          if (fn(object)) {
            this.items.splice(index, 1, object)
          } else {
            this.items.splice(index, 1)
          }
        }
      })
      const options = {
        and: [
          {
            or: [
              { containedIn: { todo_role: roles.map(v => v.name) } },
              { containedIn: { todo_id: [user.id] } }
            ]
          },
          {
            notContainedIn: { todo_category: ['综合考评', '其他'] }
          },
          {
            equalTo: { todo_state: 0 },
            limit: 1000
          }
        ]
      }
      this.items = await commonApi.search('sys_todo', options)
    },
    async onSubscribe() {
      this.subscribe = commonApi.liveQuery('sys_todo')
      this.subscribe.on('create', object => {
        object = { id: object.id, ...object.attributes }
        this.items.push(object)
      })
      this.subscription.on('update', object => {
        object = { id: object.id, ...object.attributes }
        let index = this.items.findIndex(v => v.id === object.id)
        if (index > -1) {
          this.items.splice(index, 1, object)
        }
      })
    },
    async onUnsubscribe() {
      this.subscribe.unsubscribe()
    },
    goDetail(item) {
      if (item.todo_category === '行政执法') {
        this.$router.$push('/law')
      } else if (
        item.todo_category === '收发文件' ||
        item.todo_category === '通知公告' ||
        item.todo_category === '会议通知'
      ) {
        this.$router.$push('/message')
      } else if (item.todo_category === '企业隐患排查') {
        this.$Toast('请登录pc端系统，及时处理！')
        this.$router.$push('/dangerCheck')
      } else if (item.todo_category === '特殊作业') {
        this.$router.$push('/special-work')
      } else if (item.todo_category === '企业注册审核') {
        this.$router.$push('/company/register')
      } else {
        // 其他类型暂不支持
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.no-data
  font-size 17px
  text-align center
  color #ddd
  margin-top 100px

.circle
  width 50px
  height 50px
  border-radius 50%
  display flex
  align-items center
  justify-content center
  margin 10px

  .iconfont
    font-size 30px
    color #fff
</style>
